/**
* @Author: 李晨光
* @Date: 2019/12/21
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/21
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="Filter">
    <mu-dialog transition="slide-right" fullscreen :open.sync="open">
      <div class="p-box">
        <div class="p-header">
          <mu-appbar color="primary" class="lan-header">
            <mu-button icon slot="left" @click="close">
              <i class="iconfont angle-left iconangle-left"></i>
              <span class="lan-header-back">返回</span>
            </mu-button>筛选条件
            <mu-button icon slot="right" @click="clear">
              <span class="text">清空</span>
            </mu-button>
          </mu-appbar>
        </div>
        <div class="p-content">
          <div class="lan-dialog-body" style="background:#fff">
            <mu-form
              ref="form"
              :model="form"
              class="mu-lan-form"
              :label-position="'left'"
              label-width="25%"
            >
              <mu-form-item label="开始时间">
                <mu-date-input
                  v-model="form.startTime"
                  @change="change"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择"
                  container="bottomSheet"
                  :should-disable-date="disabledStartDates"
                ></mu-date-input>
                <i class="iconfont angle-left iconangle-right"></i>
              </mu-form-item>
              <mu-form-item label="结束时间">
                <mu-date-input
                  v-model="form.endTime"
                  @change="change"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择"
                  container="bottomSheet"
                  :should-disable-date="disabledEndDates"
                ></mu-date-input>
                <i class="iconfont angle-left iconangle-right"></i>
              </mu-form-item>
            </mu-form>
          </div>
        </div>
        <div class="p-footer">
          <mu-button full-width color="primary" @click="confirm">确认</mu-button>
        </div>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Filter',
    components: {
    },
    props: {
      // 打开状态
      open: {
        type: Boolean,
        default: false
      },
      form: {
        type: Object,
        default: () => {
          return {
            startTime: "",
            endTime: "",
          }
        }
      }
    },
    model: {
      prop: "form",
      event: "change"
    },
    data() {
      return {
      }
    },
    computed: {},
    created() {
    },
    mounted() {
    },
    watch: {},
    methods: {
      init() {
        this.open = true;
      },
      close() {
        this.$emit("close");
        this.clear();
      },
      clear() {
        this.$emit("change", {
          startTime: "",
          endTime: "",
        })
      },
      change() {
        this.$emit("change", this.form);
      },
      //点击确定
      confirm() {
        this.$emit("confirm", this.form);
      },
      //不可选择的开始日期
      disabledStartDates(date) {
        if (this.form.endTime) {
          return date.getTime() > new Date(this.form.endTime).getTime();
        } else {
          return false;
        }
      },
      //不可选择的结束日期
      disabledEndDates(date) {
        if (this.form.startTime) {
          return date.getTime() < new Date(this.form.startTime).getTime();
        } else {
          return false;
        }
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
</style>
